---
import { type MarkdownHeading } from "astro";

import PageContent from "../components/docs/pageContent.astro";
import Footer from "../components/footer/footer.astro";
import HeadCommon from "../components/headCommon.astro";
import HeadSEO from "../components/headSeo.astro";
import LeftSidebar from "../components/navigation/leftSidebar.astro";
import Navbar from "../components/navigation/navbar.astro";
import RightSidebar from "../components/navigation/rightSidebar.astro";
import * as CONFIG from "../config";

import "../styles/global.css";
import "../styles/accessibility.css";
import "@fontsource-variable/inter";

import JumpToContent from "../components/accessibility/jumpToContent.astro";
import MoreMenu from "../components/navigation/moreMenu.astro";

export interface Props {
  frontmatter: CONFIG.Frontmatter;
  headings: MarkdownHeading[];
}

const { frontmatter, headings } = Astro.props;
const currentPage = Astro.url.pathname;
const currentFile = `src/pages${currentPage.replace(/\/$/, "")}.${
  frontmatter.isMdx ? "mdx" : "md"
}`;

const githubEditUrl = `${CONFIG.GITHUB_EDIT_URL}/${currentFile}`;
---

<html
  dir={frontmatter.dir ?? "ltr"}
  lang={frontmatter.lang ?? "en-us"}
  class="initial"
>
  <head>
    <HeadCommon />
    <HeadSEO frontmatter={frontmatter} />
    <title>
      {frontmatter.title} • {CONFIG.SITE.title}
    </title>

    <script is:inline>
      const html = document.documentElement;
      const theme = (() => {
        if (
          typeof localStorage !== "undefined" &&
          localStorage.getItem("theme")
        ) {
          return localStorage.getItem("theme");
        }
        if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
          return "dark";
        }
        return "light";
      })();
      if (theme === "light") {
        html.classList.remove("dark");
        html.classList.add("light");
      } else {
        html.classList.add("dark");
        html.classList.remove("light");
      }
    </script>
  </head>

  <body
    class="flex min-h-screen flex-col items-center bg-default transition-colors duration-300"
  >
    <JumpToContent />
    <div
      class="sticky top-0 z-40 max-h-full w-full bg-default transition-colors duration-300"
    >
      <Navbar />
    </div>
    <main
      class="grid w-full max-w-7xl flex-1 grid-cols-1 gap-4 md:grid-cols-[250px_auto] lg:grid-cols-[250px_auto_250px]"
    >
      <nav
        id="grid-left"
        title="Site Navigation"
        class="t3-scrollbar sticky top-20 col-span-1 hidden h-auto max-h-[calc(100vh-80px)] w-full flex-col justify-start overflow-y-auto bg-default pt-4 transition-colors duration-300 md:top-24 md:flex md:max-h-[calc(100vh-96px)] md:pt-0 md:[margin-inline-start:16px]"
      >
        <LeftSidebar frontmatter={frontmatter} currentPage={currentPage} />
      </nav>

      <div class="col-span-1 flex min-h-full w-full flex-col pt-5" id="content">
        <PageContent
          frontmatter={frontmatter}
          path={currentFile}
          headings={headings}
        >
          <slot />
        </PageContent>
        <nav class="mx-3 flex lg:hidden">
          <MoreMenu editHref={githubEditUrl} />
        </nav>
        <Footer path={currentFile} isBlog={true} />
      </div>
      <div class="md:[margin-inline-end:16px]">
        <aside
          id="grid-right"
          title="Table of Contents"
          dir="ltr"
          class="t3-scrollbar sticky top-[100px] col-span-1 hidden h-auto max-h-[calc(100vh-100px)] w-full [padding-inline-end:16px] lg:mb-12 lg:flex lg:flex-col lg:justify-start"
        >
          <RightSidebar
            headings={headings}
            githubEditUrl={githubEditUrl}
            title={frontmatter.title}
          />
        </aside>
      </div>
    </main>
    <script defer>
      const matches = document.querySelectorAll("[data-heading-link]");
      if (matches && matches.length) {
        matches.forEach((elem) => {
          const href = elem.href;
          elem.addEventListener(
            "click",
            () => {
              navigator.clipboard.writeText(href);
            },
            false,
          );
        });
      }
    </script>
  </body>
</html>
